<template>
	<view class="bigBoxImg">
		<image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/OneDrive_10_11-16-2021/2x/bg_pic01@2x.png"></image>
		<!-- 描述 -->
		<view class="miaoBox">
			<view class="miaoBoxMin">
				<view class="miaoBoxMinTitle">{{ i18n.ctwfont1 }}</view>
				<view class="miaoBoxMinText">{{ i18n.ctwfont2 }}</view>
				<view class="swiperBox">
					<image @tap="BtnL" class="BtnL" style="width: 13px; height: 13px;" mode="scaleToFill" src="/static/icon/OneDrive_10_11-16-2021/2x/ic_left_blue@2x.png"></image>
					<image @tap="BtnR" class="BtnR" style="width: 13px; height: 13px;" mode="scaleToFill" src="/static/icon/OneDrive_10_11-16-2021/2x/ic_right_blue@2x.png"></image>
					<swiper class="imgBox" :current="current" :indicator-dots="false" :circular="true" easing-function="linear" :duration="100" :autoplay="false">
						<swiper-item v-for="item in bannerinfo" :key="item.id">
							<image @tap="imgList(item)" style="width: 100%; height: 220px;" mode="scaleToFill" :src="item.url"></image>
							<view class="swiperBoxTitle">{{ item.title }}</view>
							<view class="swiperBoxText">{{ item.text }}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data: function() {
		return {
			current: 0
			// bannerinfo: [
			// 	{
			// 		id: 1,
			// 		url: '/static/icon/OneDrive_10_11-16-2021/2x/pic_photo03@2x.png',
			// 		title: this.$t('productIntroduction').ctwfont3,
			// 		text: this.$t('productIntroduction').ctwfont4
			// 	},
			// 	{
			// 		id: 2,
			// 		url: '/static/icon/OneDrive_10_11-16-2021/2x/pic_03.png',
			// 		title: this.$t('productIntroduction').ctwfont5,
			// 		text: this.$t('productIntroduction').ctwfont6
			// 	}
			// ]
		};
	},
	computed: {
		i18n() {
			return this.$t('productIntroduction');
		},
		bannerinfo() {
			const arr = [
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/23_xin_zhong_guo_da_sha/01.jpg',
					pages: '9',
					title: this.$t('productIntroduction').ctwfont11,
					text: this.$t('productIntroduction').ctwfont12,
					id: '1'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/37_jin_ma_fu_zhuang_jiao_yi_cheng/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont13,
					text: this.$t('productIntroduction').ctwfont14,
					id: '2'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/02_wan_ling_jing_pin_cheng/08.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont16,
					text: this.$t('productIntroduction').ctwfont17,
					id: '3'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/22_xin_dong_hao_pi_ju/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont18,
					text: this.$t('productIntroduction').ctwfont19,
					id: '4'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/29_tai_kang_shi_pin_cheng/09.jpg',
					pages: '9',
					title: this.$t('productIntroduction').ctwfont20,
					text: this.$t('productIntroduction').ctwfont21,
					id: '5'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/18_da_du_shi_xie_cheng/08.jpg',
					pages: '8',
					title: this.$t('productIntroduction').ctwfont22,
					text: this.$t('productIntroduction').ctwfont23,
					id: '6'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/12_xing_fa_guang_chang/07.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont24,
					text: this.$t('productIntroduction').ctwfont25,
					id: '7'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/21_yi_fa_guang_chang/01.jpg',
					pages: '8',
					title: this.$t('productIntroduction').ctwfont26,
					text: this.$t('productIntroduction').ctwfont27,
					id: '8'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/01_wan_jia_fu_zhuang_pi_fa/01.jpg',
					pages: '11',
					title: this.$t('productIntroduction').ctwfont28,
					text: this.$t('productIntroduction').ctwfont29,
					id: '9'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/28_sha_he_nan_cheng/08.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont31,
					text: this.$t('productIntroduction').ctwfont32,
					id: '10'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/13_bei_cheng_fu_zhuang_cheng/02.jpg',
					pages: '6',
					title: this.$t('productIntroduction').ctwfont33,
					text: this.$t('productIntroduction').ctwfont34,
					id: '11'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/06_zhong_shan_ba_tong_zhuang_shi_chang/06.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont35,
					text: this.$t('productIntroduction').ctwfont36,
					id: '12'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/04_zhong_da_qing_fang_cheng/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont37,
					text: this.$t('productIntroduction').ctwfont38,
					id: '13'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/05_zhong_da_chang_jiang/01.jpg',
					pages: '9',
					title: this.$t('productIntroduction').ctwfont39,
					text: this.$t('productIntroduction').ctwfont40,
					id: '14'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/26_chang_gang_wei_huo/09.jpg',
					pages: '9',
					title: this.$t('productIntroduction').ctwfont41,
					text: this.$t('productIntroduction').ctwfont42,
					id: '15'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/19_qing_feng_fu_zhuang_shi_chang_wei_huo/07.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont43,
					text: this.$t('productIntroduction').ctwfont44,
					id: '16'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/10_xin_ji_sha_xi_jiu_dian_yong_pin_bo_lan_cheng/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont45,
					text: this.$t('productIntroduction').ctwfont46,
					id: '17'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/35_xi_jiao_da_sha/09.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont47,
					text: this.$t('productIntroduction').ctwfont48,
					id: '18'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/33_mei_bo_cheng/08.jpg',
					pages: '8',
					title: this.$t('productIntroduction').ctwfont49,
					text: this.$t('productIntroduction').ctwfont50,
					id: '19'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/31_yi_you_qi_pei_yong_pin_cheng/01.jpg',
					pages: '9',
					title: this.$t('productIntroduction').ctwfont51,
					text: this.$t('productIntroduction').ctwfont52,
					id: '20'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/27_shui_dian_pi_ju_cheng/10.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont53,
					text: this.$t('productIntroduction').ctwfont54,
					id: '21'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/11_xin_jiang_yan_jing_cheng/09.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont55,
					text: this.$t('productIntroduction').ctwfont56,
					id: '22'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/24_xin_ya_zhou_dian_zi_cheng/01.jpg',
					pages: '7',
					title: this.$t('productIntroduction').ctwfont57,
					text: this.$t('productIntroduction').ctwfont58,
					id: '23'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/36_jin_xiang_nei_yi_cheng/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont59,
					text: this.$t('productIntroduction').ctwfont60,
					id: '24'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/38_gao_di_jie/10.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont62,
					text: this.$t('productIntroduction').ctwfont63,
					id: '25'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/16_tian_hong_pi_ju/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont64,
					text: this.$t('productIntroduction').ctwfont65,
					id: '26'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/07_zhong_gang_pi_ju/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont66,
					text: this.$t('productIntroduction').ctwfont67,
					id: '27'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/09_jia_hao_guo_ji_pi_liao_wu_jin_cheng/10.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont68,
					text: this.$t('productIntroduction').ctwfont69,
					id: '28'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/34_Shiling_International_Leather_centrum/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont70,
					text: this.$t('productIntroduction').ctwfont71,
					id: '29'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/30_bai_yun_mo_pei/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont72,
					text: this.$t('productIntroduction').ctwfont73,
					id: '30'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/14_guo_lan_yi_liao/01.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont74,
					text: this.$t('productIntroduction').ctwfont75,
					id: '31'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/25_xin_hua_nan_xie_cheng/07.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont76,
					text: this.$t('productIntroduction').ctwfont77,
					id: '32'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/15_guo_ji_wan_ju_wen_ju_jing_pin_guang_chang/03.jpg',
					pages: '8',
					title: this.$t('productIntroduction').ctwfont78,
					text: this.$t('productIntroduction').ctwfont79,
					id: '33'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/03_zhong_kai_nan_men_tong_zhuang_cheng/07.jpg',
					pages: '8',
					title: this.$t('productIntroduction').ctwfont80,
					text: this.$t('productIntroduction').ctwfont81,
					id: '34'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/32_yi_min_fu_zhuang_cheng/07.jpg',
					pages: '7',
					title: this.$t('productIntroduction').ctwfont82,
					text: this.$t('productIntroduction').ctwfont83,
					id: '35'
				},
				{
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/39_gao_di_xi_xie_jie/08.jpg',
					pages: '10',
					title: this.$t('productIntroduction').ctwfont84,
					text: this.$t('productIntroduction').ctwfont85,
					id: '36'
				}
			];
			return arr;
		}
	},
	methods: {
		BtnL(val) {
			this.current = this.current - 1;
			if (this.current <= 0) {
				this.current = 0;
			}
			// this.current === 1 ? (this.current = 2) : (this.current = 1);
			// if (val === 1) {
			// 	this.current = 2;
			// } else {
			// 	this.current = 1;
			// }
		},
		BtnR(val) {
			this.current = this.current + 1;
			if (this.current > this.bannerinfo.length) {
				this.current = 0;
			}
			// this.current === 1 ? (this.current = 2) : (this.current = 1);
			// if (val === 2) {
			// 	this.current = 1;
			// } else {
			// 	this.current = 2;
			// }
		},
		imgList(item) {
			const url = item.url;
			const textbox = url.substr(url.length - 6, url.length)
			const arr = [];
			const newUrl = url.replace(textbox, '');
			for (var i = 0; i < item.pages; i++) {
				var tar = '';
				if (i + 1 < 10) {
					tar = `${newUrl}0${i + 1}.jpg`;
				} else {
					tar = `${newUrl}${i + 1}.jpg`;
				}
				arr.push(tar);
			}
			uni.previewImage({
				current: item.url,
				urls: arr,
				success: res => {
					console.log(res);
				},
				fail: err => {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bigBoxImg {
	position: relative;
	width: 750rpx;
	height: 620px;
	.miaoBox {
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: 94%;
		background-color: #f1f1f1;
		.miaoBoxMin {
			padding: 20px 15px;
			box-sizing: border-box;
			.miaoBoxMinTitle {
				text-align: center;
				font-size: $uni-font-size-custom-e;
				color: #CD001B;
				font-weight: 700;
				margin-bottom: 5px;
			}
			.miaoBoxMinText {
				font-size: $uni-font-size-custom-d;
				line-height: 16px;
				color: #CD001B;
				font-weight: 700;
				margin-bottom: 10px;
				word-break: break-all; // 强制换行
			}
			.swiperBox {
				position: relative;
				padding: 0 10px;
				box-sizing: border-box;
				// height: 360px;
				// overflow: scroll;
				.BtnL {
					position: absolute;
					top: 30%;
					left: -10px;
					transform: translateY(-50%);
				}
				.BtnR {
					position: absolute;
					top: 30%;
					right: -10px;
					transform: translateY(-50%);
				}
				.imgBox {
					width: 100%;
					height: 360px;
					.swiperBoxTitle {
						font-size: $uni-font-size-custom-e;
						color: #CD001B;
						font-weight: 700;
						margin: 5px 0;
					}
					.swiperBoxText {
						height: 100px;
						overflow: scroll;
						font-size: $uni-font-size-custom-d;
						line-height: 16px;
						color: #424451;
						font-weight: 700;
						word-break: break-all; // 强制换行
					}
				}
			}
		}
	}
}
</style>
